<template>
  <div style="position: relative;" @click="hideEmoji">
    <emoji v-if="emojiVisible" style="position: absolute;right: 10px;transform: translateY(-88%);background-color: white;z-index: 4" @select="selectEmoji"></emoji>
    <div style="position: relative;height: 100px;border: 1px solid #07c160;border-radius: 5px;overflow: hidden">
      <div id="editor" style="padding-left: 10px">
      </div>
      <div style="position: absolute;bottom: 10px;right: 10px;">
        <span @click="showEmoji" style="position: relative; top: 5px;margin-right: 5px;cursor: pointer" class="iconfont icon-expression" title="表情" @click.stop></span>
        <el-button type="success" @click="sendValue">发送</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Emoji from './Emoji'
import Quill from 'quill'
export default {
  data () {
    return {
      emojiVisible: false
    }
  },
  components: {
    Emoji,
    Quill
  },
  mounted () {
    this.quill = new Quill('#editor', {
      placeholder: '评论',
      theme: 'snow',
      modules: {
        toolbar: []
      }
    })
  },
  methods: {
    showEmoji () {
      this.emojiVisible = !this.emojiVisible
    },
    hideEmoji () {
      this.emojiVisible = false
    },
    selectEmoji (url) {
      this.emojiVisible = false
      const range = this.quill.getSelection(true)
      // 插入表情包
      this.quill.insertEmbed(range.index, 'image', url)
      this.content = this.quill.root.innerHTML
      // 将光标移到最后
      this.quill.setSelection(range.index + 1, 0)
    },
    sendValue () {
      let value = this.quill.root.innerHTML
      this.$emit('getValue', value)
      this.quill.root.innerHTML = ''
    }
  }
}
</script>
<style>
</style>
